<template>
    <a-card :bordered="false">
        <a-tabs :active-key="activeId" tabPosition="top" @change="handleChangeActiveId">
            <a-tab-pane v-for="item in flowType" :key="item.type">
                <template slot="tab">
                    {{ item.name }}
                </template>
                <a-table @change="handleTableChange" rowKey="dataId" :loading="dataLoading" :columns="columns" :data-source="data" :pagination="ipagination">
                    <template slot="productThumb" slot-scope="text">
                        <a-avatar shape="square" :size="64" :src="text" />
                    </template>
                    <template slot="patientInfo" slot-scope="text, record">
                        <div style="display:flex">
                            <a-avatar shape="square" :size="64" :src="record.patientAvatar" />
                            <div style="margin-left: 10px">
                                <p>患者姓名：{{record.patientName}}</p>
                                <p>患者手机号：{{record.patientMobile}}</p>
                            </div>
                        </div>
                    </template>
                    <template slot="productInfo" slot-scope="text, record">
                        <div style="display:flex">
                            <!-- <a-avatar shape="square" :size="64" :src="record.orderInfoTitle" /> -->
                            <div>
                                <p>商品名称：{{record.orderInfoTitle}}</p>
                                <p>原价：￥{{record.orderInfoSum/100}}</p>
                            </div>
                        </div>
                    </template>
                    <template slot="orderInfoProducts" slot-scope="text, record">
                        <p v-for="row in record.orderInfoProducts">{{row.productName}}*{{row.productNum}}</p>
                    </template>
                    <template slot="orderInfoPayment" slot-scope="text">
                        ￥{{text/100}}
                    </template>
                    <template slot="productFormatDiscountPrice" slot-scope="text">
                        ￥{{text}}
                    </template>
                    <template slot="orderInfoDeliveryType" slot-scope="text">
                        <a-tag v-if="text == 2" color="blue">配送到家</a-tag>
                        <a-tag color="orange" v-else>线下领取</a-tag>
                    </template>
                    <span slot="action" slot-scope="text, record">
                        <!--已付款且是配送到家的订单-->
                        <a v-if="record.orderInfoOrderstatus == 3 && record.orderInfoDeliveryType == 2" @click="handleEditLogistics(record.dataId, false)">发货</a>
                        <!--已发货-->
                        <a v-if="record.orderInfoOrderstatus == 8" @click="handleEditLogistics(record.dataId, true)">物流信息</a>
                        <!--退款-->
                        <a v-if="record.orderInfoOrderstatus == 6" @click="handleVerifyRefund(record)">退款审核</a>
                    </span>
                </a-table>
            </a-tab-pane>
        </a-tabs>

        <logistics-modal ref="logisticsModalForm" @ok="modalFormOk"></logistics-modal>
        <refund-modal ref="refundModalForm" @ok="modalFormOk"></refund-modal>
    </a-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction, deleteAction } from '@/api/manage'
import { numberToChinese } from '@/utils/util'
import moment from 'moment'
import LogisticsModal from './modules/LogisticsModal.vue'
import RefundModal from './modules/RefundModal.vue'


export default {
    name: 'ShopProduct',
    components: {
        LogisticsModal,
        RefundModal
    },
    data() {
        return {
            dataLoading: true,
            activeId: 0,
            flowType: [
                {
                    type: 0,
                    name: "全部"
                },
                {
                    type: 1,
                    name: "监测设备"
                },
                {
                    type: 3,
                    name: "服务"
                },
                {
                    type: 4,
                    name: "营养餐包"
                }
            ],
            data: [],
            columns: [
                {
                    title: '订单号',
                    dataIndex: 'orderInfoNo',
                    key: 'orderInfoNo',
                    scopedSlots: { customRender: 'orderInfoNo' },
                },
                {
                    title: '下单人',
                    dataIndex: 'patientInfo',
                    key: 'patientInfo',
                    scopedSlots: { customRender: 'patientInfo' }
                },
                {
                    title: '订单信息',
                    dataIndex: 'productInfo',
                    key: 'productInfo',
                    scopedSlots: { customRender: 'productInfo' }
                },
                {
                    title: '商品明细',
                    dataIndex: 'orderInfoProducts',
                    key: 'orderInfoProducts',
                    scopedSlots: { customRender: 'orderInfoProducts' }
                },
                {
                    title: '付款金额',
                    dataIndex: 'orderInfoPayment',
                    key: 'orderInfoPayment',
                    scopedSlots: { customRender: 'orderInfoPayment' }
                },
                {
                    title: '配送方式',
                    dataIndex: 'orderInfoDeliveryType',
                    key: 'orderInfoDeliveryType',
                    scopedSlots: { customRender: 'orderInfoDeliveryType' }
                },
                {
                    title: '订单状态',
                    dataIndex: 'orderInfoOrderstatusText',
                    key: 'orderInfoOrderstatusText',
                    scopedSlots: { customRender: 'orderInfoOrderstatusText' }
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    scopedSlots: {customRender: 'action'},
                    align: "center",
                    width: 170
                }
            ],
            /* 分页参数 */
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return ' 共' + total + '条'
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
        }
    },
    watch: {
        activeId() {
            if (this.activeId >= 0) {
                console.log('activeId', this.activeId)

                // if (this.activeId == 3 ) {
                //     this.columns.splice(this.columns.length - 1, 0, {
                //         title: '退款原因',
                //         dataIndex: 'flowRefundReason',
                //         key: 'flowRefundReason',
                //         scopedSlots: { customRender: 'flowRefundReason' }
                //     });
                // } else {
                //     this.columns?.splice(this.columns?.findIndex(v => v.key === 'flowRefundReason'), 1)
                // }

                this.handleGetTableData()
            }
        }
    },
    created() {
        this.getInit()
    },
    methods: {
        ...mapGetters(["doctorId", "orgCode"]),
        async getInit() {
            await this.handleGetTableData()
        },
        handleGetTableData() {
            this.dataLoading = true
            postAction('/shop/order/oms', { orderProductCategory: this.activeId, doctorId: this.doctorId() || '0', orgCode: this.orgCode() })
                .then(res => {
                    if (res.success) {
                        this.data = res.result.records
                        if (res.result.total) {
                            this.ipagination.total = res.result.total
                        } else {
                            this.ipagination.total = 0
                        }
                    } else {
                        this.$message.warning(res.message)
                    }
                })
                .finally(() => {
                    this.dataLoading = false
                })
        },
        handleTableChange(pagination) {
            this.ipagination = pagination
            this.handleGetTableData()
        },
        handleChangeActiveId(key) {
            this.activeId = key
        },
        handleEditLogistics(orderId, isSend) {
            this.$refs.logisticsModalForm.edit({id: orderId})
        },
        handleVerifyRefund(order) {
            this.$refs.refundModalForm.edit(order)
        },
        // handleAdd() {
        //     this.$refs.modalForm.add({productCategory: this.activeId == 0 ? undefined : this.activeId, productStatus: 1});
        //     this.$refs.modalForm.title = "新增";
        //     this.$refs.modalForm.disableSubmit = false;
        // },
        // handleEdit(record) {
        //     this.$refs.modalForm.edit(record);
        //     this.$refs.modalForm.title = "编辑";
        //     this.$refs.modalForm.disableSubmit = false;
        // },
        // handleDelete(id) {
        //     deleteAction('/shop/product/delete', {id}).then(res => {
        //         if (res.success) {
        //             this.$message.success('删除成功')
        //             this.getInit()
        //         } else {
        //             this.$message.error(res.message)
        //         }
        //     })
        // },
        modalFormOk() {
            // 新增/修改 成功时，重载列表
            this.getInit();
        }
    }
}
</script>

<style lang="less" scoped>
</style>

